<template>
  <div>
    <el-dialog
      title="关联成员"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeAddDialog"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="refAddForm"
        label-width="146px"
      >
        <div style="height: 30px"></div>

        <el-form-item size="small" label="请选择岗位" prop="streetCode">
          <el-select
            v-model="role"
            style="width: 80%"
            placeholder="请选择岗位"
            size="small"
            class="el_select"
          >
            <el-option
              v-for="item in roleList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <div
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-select
            size="small"
            v-model="searchSel"
            slot="prepend"
            placeholder="请选择"
            class="el_Select"
            @change="onchange"
          >
            <el-option label="用户名" value="1"></el-option>
            <el-option label="手机号" value="2"></el-option>
          </el-select>
          <el-input
            :placeholder="
              searchSel == 1 ? '请输入完整的用户名' : '请输入完整的手机号'
            "
            v-model="searchVal"
            style="width: 250px; margin-right: 15px"
            size="small"
            maxlength="20"
            clearable
            @clear="searchClick"
            class="el_input"
          >
            <el-button
              slot="append"
              :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
              @click="searchClick"
            >
            </el-button>
          </el-input>
        </div>
        <!-- <el-form-item size="small" prop="mobile"> -->
        <!-- <el-input
            clearable
            @clear="clearMobile"
            v-model="addForm.mobile"
            placeholder="请输入成员的完整手机号码/用户名"
            style="width: 380px"
            maxlength="11"
          >
            <el-button
              slot="append"
              class="search-button"
              icon="el-icon-search"
              @click="searchSafetyOfficer"
            ></el-button
          ></el-input> -->

        <!-- <el-input :placeholder="
            searchSel == 1 ? '请输入完整的用户名' : '请输入完整的手机号'
          " v-model="searchVal" style="width: 360px" size="small" maxlength="20" clearable @clear="searchClick">
            <el-select v-model="searchSel" slot="prepend" placeholder="请选择">
              <el-option label="用户名" value="1"></el-option>
              <el-option label="手机号" value="2"></el-option>
            </el-select>
            <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchClick">
            </el-button>
          </el-input> -->

        <!-- </el-form-item> -->
        <div class="safety-box">
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            v-if="memberInfo.id"
          >
            <div class="name">
              <span>{{ memberInfo.username }}</span>
              <p>{{ memberInfo.mobile }}</p>
            </div>
            <div class="remobe">
              <el-button
                type="text"
                class="button"
                icon="el-icon-delete"
                style="color: #eee; font-size: 20px"
                @click="remobeSafetyOfficerInfo"
              ></el-button>
            </div>
          </el-card>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAddDialog" class="cancel-button">取 消</el-button>
        <el-button
          size="small"
          @click="addSubmit"
          v-preventReClick="1000" class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqOrgAdmin, reqOrgUserAdd } from "@api/api.js";
import { validMobile } from "../../../utils/validate";
import { mapState } from "vuex";
export default {
  name: "addProject",
  props: ["orgId", "width"],
  data() {
    return {
      loadingSearch: false,
      searchVal: "",
      searchSel: "1", //用户名/手机号
      dialogVisible: false,
      addForm: {
        mobile: "",
      },
      memberInfo: "",
      // 表单验证规则
      rules: {
        mobile: [
          // { required: true, message: "", trigger: "blur" }, //自定义校验规则
          // { validator: validMobile },
        ],
      },
      role: 2,
      roleList: [
        {
          id: 2,
          name: "消防安全专员",
        },
        {
          id: 3,
          name: "消防安全负责人",
        },
        {
          id: 4,
          name: "消防监管人",
        },
        {
          id: 5,
          name: "专职消防安全管理人",
        },
        {
          id: 6,
          name: "楼(建筑)长",
        },
        {
          id: 7,
          name: "维保人员",
        },
      ],
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {
    // dialogVisible(e) {
    //   // console.log(e);
    //   if (e) {
    //     setTimeout(() => {
    //       if (this.width > 520) {
    //         this.$el.querySelector('.el-input-group__prepend').style.cssText =
    //           'border-left: none !important;border-top: none !important;border-bottom: none !important;';
    //       } else {
    //         this.$el.querySelector('.el-input-group__prepend').style.cssText =
    //           'border-left: none !important;border-bottom: none !important;';
    //       }
    //     }, 100)
    //   }
    // }
  },
  methods: {
    onchange(e) {
      this.searchVal = "";
    },
    // 查询
    async searchClick() {
      this.loadingSearch = true;
      await this.searchSafetyOfficer();
      this.loadingSearch = false;
    },
    // 点击搜索
    async searchSafetyOfficer() {
      let { searchSel, username, mobile, searchVal } = this;
      if (searchSel == 1) {
        username = searchVal;
        mobile = "";
      } else {
        mobile = searchVal;
        username = "";
      }
      if (searchVal.length <= 0)
        return this.$modal.notifyWarning("请输入成员手机号/用户名");
      const res = await reqOrgAdmin({
        username,
        mobile,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if (!res.data.rows) return this.$modal.notifyWarning("没有此成员");
      this.memberInfo = res.data.rows;
    },
    //清空输入框电话号码
    clearMobile() {
      this.addForm.mobile = "";
      this.memberInfo = "";
      this.searchSel = "1";
      this.searchVal = "";
    },
    // 移除信息
    remobeSafetyOfficerInfo() {
      this.memberInfo = "";
    },
    // 点击新增
    async addSubmit() {
      // console.log(this.memberInfo);
      if (!this.memberInfo.id)
        return this.$modal.notifyWarning("请选择要加入的成员");
      if (this.role == "" || this.role == null)
        return this.$modal.notifyWarning("请选择岗位");
      const res = await reqOrgUserAdd({
        tenantId: this.user.tenantId,
        orgId: this.orgId,
        userId: this.memberInfo.id,
        role: this.role,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("成功");
      this.closeAddDialog();
      this.$parent.getInitDataList();
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.dialogVisible = false;
      this.role = 2;
      this.clearMobile();
    },
  },
  mounted() {},
  deactivated() {
    this.closeAddDialog();
  },
};
</script>

<style lang="less" scoped>
// 查询条件切换
// ::v-deep .el-input-group__prepend {
//   // border-left: none !important;
//   // border-top: none !important;
//   // border-bottom: none !important;
//   // border-right: none !important;
// }

.el-form {
  position: relative;

  .el-form-item {
    .el-input {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 5px;
      margin: auto;
    }
  }
}

.safety-box {
  position: relative;
  width: 460px;
  height: 100px;

  .el-card {
    position: absolute;
    left: 48px;
    bottom: 0;
    margin: auto;

    .name {
      padding: 0 10px;
      max-width: 360px;
      height: 80px;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      span {
        // width: 200px;
        font-size: 20px;
        color: #666;
        font-weight: 600;
        letter-spacing: 5px;

        overflow: hidden; // 溢出隐藏
        white-space: nowrap; // 不换行
        text-overflow: ellipsis; // 显示省略号

        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
      }

      p {
        font-size: 18px;
        margin-top: 2px;
        color: #999;
      }
    }

    .remobe {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100px;
      z-index: 999;
      opacity: 0;
      text-align: center;
      line-height: 90px;

      &:hover {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.7);
      }
    }
  }
}

.search-button:active {
  opacity: 0.5;
}

// 搜索框
::v-deep .el_input .el-input__inner {
  border-left: none !important;
  border-radius: 0px !important;
}

::v-deep .el_Select .el-input__inner {
  border-radius: 0px !important;
}

// .dialog-footer {
//   display: flex;
//   justify-content: space-between;
//   margin-bottom: 30px;
// }

::v-deep .el_select .el-input {
  width: 100% !important;
}
</style>
